<template>
	<view>
		<view class="body after-navber">
		    <view class="flex-row bg-white mb-20 header-h">
		        <view class="flex-grow-0">
		            <image mode="aspectFill" :src="data.image" style="width: 120rpx; height: 120rpx; margin-right: 24rpx"></image>
		        </view>
		        <view class="flex-grow-1">
		            <view>
		          
		                <text style="color: #25ae5f">{{ data.name }}</text>
		            </view>
		            <view style="color: #888">快递公司：{{ data.express_name }}</view>
		            <view class="flex-row flex-y-center" style="color: #888">
		                <view class="flex-grow-1">快递单号：{{ data.express_no }}</view>
		                <view @tap="copyText" class="flex-grow-0 flex-x-center" :data-text="data.express_no" style="width: 100rpx; height: 50rpx; border: 1rpx solid #eee">
		                    复制
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="data-list" v-if="data.list && data.list.length > 0">
		        <view class="data-item flex-row" v-for="(item, index) in data.list" :key="index">
		            <view class="flex-grow-0 item-icon flex-col">
		                <view class="item-line flex-grow-0"></view>
		                <view class="item-line flex-grow-0 fs-0">
		                    <image class="point-gray" src="/static/images/icon-point-gray.png" style="width: 16rpx; height: 16rpx"></image>
		                    <image class="point-green" src="/static/images/icon-point-green.png" style="width: 32rpx; height: 32rpx; left: -15rpx"></image>
		                </view>
		                <view class="item-line flex-grow-1"></view>
		            </view>
		
		            <view class="flex-grow-1 item-content">
		                <view>{{ item.context }}</view>
		                <view>{{ item.time }}</view>
		            </view>
		        </view>
		    </view>
		    <view class="no-data" v-else>暂无物流信息</view>
		</view>
	</view>
</template>

<script>
	import {Order} from '../../../apirequest/order-model.js';
	var o = new Order();
	export default {
		data() {
			return {
				data:'',
				order_id:0 
			}
		},
		onLoad(options){
			this.order_id = options.order_id
			this._index()
		},
		methods: {
			_index(){
				var that = this;
				o.express({order_id:this.order_id},(res) => {
					if(res.code == 1){
						that.data = res.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			copyText: function (t) {
			    var e = t.currentTarget.dataset.text;
			   uni.setClipboardData({
			        data: e,
			        success: function () {
			            uni.showToast({
			                title: '已复制'
			            });
			        }
			    });
			},
		}
	}
</script>

<style>
.header-h {
    border-top: 1rpx solid #e3e3e3;
    padding: 32rpx 24rpx;
}

.data-list {
    background: #fff;
    border-bottom: 1rpx solid #e3e3e3;
}

.data-list .data-item {
    padding-right: 24rpx;
}

.data-list .data-item .item-icon {
    padding: 0 40rpx;
}

.data-list .data-item .item-line {
    width: 2rpx;
    background: #e3e3e3;
    position: relative;
}

.data-list .data-item .item-line:nth-of-type(1) {
    height: 42rpx;
}

.data-list .data-item .item-line image {
    position: absolute;
    left: -5rpx;
    z-index: 9;
    top: -6rpx;
}

.data-list .data-item .item-line image.point-green {
    display: none;
}

.data-list .data-item:first-child .item-line image.point-green {
    display: block;
}

.data-list .data-item:first-child .item-line:nth-of-type(1) {
    opacity: 0;
}

.data-list .data-item:last-child .item-line:nth-of-type(3) {
    opacity: 0;
}

.data-list .data-item .item-content {
    padding: 28rpx 0;
    border-bottom: 1rpx solid #eee;
    color: #888;
}

.data-list .data-item:first-child .item-content {
    color: #25ae5f;
}

.data-list .data-item:last-child .item-content {
    border-bottom: none;
}

.no-data {
    padding: 24rpx;
    text-align: center;
    color: #888;
}
</style>
